<template>
  <section class="forgot">
    <div class="login-box">
      <form class="form-input">
          <div style="border-bottom: 1px solid #eeeeee">
            <x-input :max="13"  v-model="phone" :placeholder="$t('phone')">
              <i class="iconfont iconfont1" slot="label" >&#xe65a;&nbsp;</i>
            </x-input>
          </div>
          <div style="border-bottom: 1px solid #eeeeee">
            <x-input    v-model="verification" :placeholder="$t('code')">
              <i class="iconfont iconfont1" slot="label">&#xe60d;&nbsp;</i>
              <x-button slot="right" mini  @click.native="sendCode" action-type="button">{{sen_code}}</x-button>
            </x-input>
          </div>
          <div style="border-bottom: 1px solid #eeeeee">
            <x-input  type="password"  v-model="pwd" :placeholder="$t('pwd')">
              <i class="iconfont iconfont1" slot="label">&#xe62d;&nbsp;</i>
            </x-input>
          </div>
          <div style="border-bottom: 1px solid #eeeeee">
            <x-input  type="password"  v-model="pwd1" :placeholder="$t('confirm pwd')" :equal-with="pwd">
              <i class="iconfont iconfont1" slot="label">&#xe62d;&nbsp;</i>
            </x-input>
          </div>
      </form>
      <x-button :gradients="buttonColor" @click.native="doNext" action-type="button">{{$t('confirm')}}</x-button>
    </div>
  </section>
</template>

<i18n>
  code:
    en: Code
    zh-CN: 请输入验证码
  send code:
    en: Send Code
    zh-CN: 发送验证码
  resend:
    en: s resend
    zh-CN: s后重新发送
  resend code:
    en: resend code
    zh-CN: 重新发送验证码
  pop:
    en: Please fill in the complete information
    zh-CN: 请填写完整信息
</i18n>

<script>
  import {Toast, XInput, XButton} from 'vux'
  export default {
    name: 'login',
    components: {
      XButton,
      XInput,
      Toast
    },
    data () {
      return {
        sen_code: this.$t('send code'),
        buttonColor: ['#537fbf', '#537fbf'],
        phone: '',
        pwd: '',
        pwd1: '',
        verification: '',
        sms_verify: '',
        event: 'changepwd',
        totalTime: 60,
        canClick: true,
        resend: this.$t('resend'),
        resend_code: this.$t('resend code'),
        pop: this.$t('pop')
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      getInfo () {
        let vue = this
        let url = '/api/sms/before_send'
        vue.post({
          url: url,
          success: function (data) {
            vue.sms_verify = data.data.sms_verify
          }
        })
      },
      sendCode () {
        let vue = this
        let url = '/api/sms/send'
        vue.post({
          url: url,
          params: {
            mobile: vue.phone,
            event: vue.event,
            sms_verify: vue.sms_verify
          },
          success: function (data) {
            if (data.code === 1) {
              if (!vue.canClick) return
              vue.canClick = false
              vue.sen_code = vue.totalTime + vue.resend
              let clock = window.setInterval(() => {
                vue.totalTime--
                vue.sen_code = vue.totalTime + vue.resend
                if (vue.totalTime < 0) {
                  window.clearInterval(clock)
                  vue.sen_code = vue.resend_code
                  vue.totalTime = 60
                  vue.canClick = true
                }
              }, 1000)
              vue.$vux.toast.text(data.msg)
            } else {
              vue.$vux.toast.text(data.msg)
            }
            this.getInfo()
          }
        })
      },
      doNext () {
        if (this.phone === '' || this.pwd === '' || this.pwd1 === '' || this.verification === '') {
          this.$vux.toast.text(this.pop, 'middle')
        } else {
          let vue = this
          let url = '/api/account/change_password'
          vue.post({
            url: url,
            params: {
              mobile: vue.phone,
              captcha: vue.verification,
              new_password: vue.pwd,
              verify_password: vue.pwd1
            },
            success: function (data) {
              console.log(data)
              if (data.code === 1) {
                vue.$router.back(-1)
              } else {
                vue.$vux.toast.text(data.msg, 'middle')
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="less">
  .forgot {
    height: 100%;
    background-color: #fff;
    padding:0.4rem;
    padding-top: 0;
    box-sizing: border-box;
    .logo {
      text-align: center;
      font-size: 40px;
      padding-top: 10vh;
    }
    .form-input {
      padding: 15px 0;
      div{
        .vux-x-input{
          height: 0.5rem;
          padding-left: 0.1rem;
          padding-bottom: 0.1rem;
          padding-top: 0.6rem;
          font-size: 0.26rem;
          input{
            height: 0.5rem;
          }
          input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #bbbbbb !important;
            font-size: 0.28rem;
          }
        }
        .iconfont1{
          border-right:1px solid #dddddd ;
          font-size: 0.33rem;
        }
        .weui-btn:after{
          border: none;
        }
      }
      button{
        background-color: white;
        border: 1px  solid  #57a94f;
        color: #57a94f;
        width: 1.5rem;
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.24rem;
        padding: 0;
        margin-bottom: 0.1rem;
      }
    }
    .tip {
      padding-top: 20vh;
      text-align: center;
    }
  }
</style>
